<template>
	<m-layout title="收藏">
		<text slot="right" v-if="listArr.length>0" style="font-size: 30rpx;"
			:style="'color:' + (isEditor?'#FA2B47':'#333333')"
			@click="isEditor = !isEditor;">{{isEditor?'退出编辑':'编辑'}}</text>
		<m-block bgColor="unset">
			<view class="cart_box">
				<!-- tab -->
				<!-- 商品列表 -->
				<template>
					<view class="goods-box" v-for="(item, index) in listArr" :key="index">
						<m-block class="flex-between" gap="32 24" spa="0 0 16 0">
							<m-icon v-if="isEditor" size="40" spa="0 15 0 0 " :color="item.checked?'#FA2B47':'#C5C5C5'"
								:type.sync="item.checked?'icon-chenggong':'icon-weixuanzhongyuanquan'"
								@click="check(item)"></m-icon>
							<template>
								<view class="right"
									@click="Jump({url:'/pages/home/goodsDetail/goodsDetail?id='+item.goodsid,mode:1})">
									<view class="shop_box flex">
										<m-image size="40" radius="100" :src="item.shopicurl||''"
											types="shop"></m-image>
										<text>{{item.shopname||'平台商品'}}</text>
									</view>
									<view class="right-goods">
										<orderCard :price="[item.goodsprice,item.goodsprice3]" :item="item" :count="1" :showStock="false"
											:specification="item.goodsname" :showCount="false">
										</orderCard>
									</view>
								</view>
							</template>
						</m-block>
					</view>
					<m-loading :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount"></m-loading>
				</template>

				<!-- 全选 -->
				<view v-if="isEditor" class="bottom_all flex-between">
					<view class="flex">
						<m-icon size="50" spa="0 16 0 0" :color="allCheck.length == listArr.length?'#FA2B47':'#C5C5C5'"
							:type.sync="allCheck.length == listArr.length?'icon-chenggong':'icon-weixuanzhongyuanquan'"
							@click="checkAll"></m-icon>
						<!-- <radio style="transform: scale(0.9);padding-right: 16rpx;" color="#FA2B47" :checked="allCheck.length == listArr.length"
							@click="checkAll" /> -->
						<view>全选</view>
					</view>
					<view class="flex">
						<m-button class="hq" size="small" type="hollow" @click="deleteCollection">删除</m-button>
					</view>
				</view>
			</view>
		</m-block>
	</m-layout>
</template>

<script>
	import { getMyGoodsCollect, GetCollectShopList, CollectGoods, CollectGoods_Del } from "@/api/Goods.js" // 引入接口 
	export default {
		data() {
			return {
				isEditor: false,
				pageIndex: 1, // 当前页数
				pageSize: 10,
				pageCount: 1, // 列表总页数（用于加载更多）
				listArr: [], // 主列表
				isLoading: false,
				ctype: 1, // 1商品 2店铺
			};
		},
		computed: {
			//全选
			allCheck() {
				const a = this.listArr.filter(item => {
					return item.checked == true;
				})
				return a
			},
		},
		watch: {
			//监听编辑
			isEditor(val) {
				this.listArr.forEach(item => {
					item.checked = false;
				})
			},
		},
		onShow() {
			this.initData();
		},
		onPullDownRefresh() {
			this.initData();
		},
		onReachBottom() {
			if (this.pageIndex < this.pageCount) {
				this.pageIndex += 1;
				this.getList();
			}
		},
		methods: {
			///////////////////////////////////// 初始化 ////////////////////////////////////////
			initData() {
				// 初始默认数据
				this.isEditor = false;
				this.pageIndex = 1;
				this.pageSize = 10;
				this.pageCount = 1;
				this.listArr = [];
				// 网络请求
				this.getList();
			},
			///////////////////////////////////// 网络请求 ////////////////////////////////////////
			// 获取主列表
			async getList() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, pageCount } = await getMyGoodsCollect({
					ctype: this.ctype,
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
				});
				console.log('list===>', list)
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
			// 执行删除
			async deleteCollection() {
				let collectIDList = [];

				this.allCheck.forEach(item => {
					collectIDList.push( this.ctype==1?item.goodsid:item.goodsid);
				})
				console.log('collectIDList===>', collectIDList)
				let { success, data } = await CollectGoods_Del({
					ctype: this.ctype
				}, collectIDList);
				if (success) {
					this.initData();
				}
			},
			///////////////////////////////////// 点击事件 ////////////////////////////////////////
			//选中状态处理
			check(item) {
				item.checked = !item.checked;
				this.listArr = JSON.parse(JSON.stringify(this.listArr))
			},
			// 点击全选
			checkAll() {
				const a = this.allCheck.length == this.listArr.length;
				this.listArr.forEach(item => {
					item.checked = !a;
				})
				this.listArr = JSON.parse(JSON.stringify(this.listArr))
			},
		},
		onPullDownRefresh() {
			this.initData();
		},
		onReachBottom() {
			this.getList();
			console.log('触底了');
		}
	}
</script>

<style lang="scss">
	::v-deep .segmented-control__text {
		font-size: 28rpx;
	}

	.cart_box {
		flex: 1;
		position: relative;
		padding: 24rpx 24rpx 0rpx 24rpx;

		.goods-box {
			.right {
				flex: 1;

				.shop_box {
					text {
						padding-left: 10rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.right-goods {
					.order-card {
						padding-bottom: 0;
					}
				}
			}

			.shop-box {
				.right-shop {
					padding-left: 24rpx;
					flex: 1;

					.h1 {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.h2 {
						padding-top: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999
					}

				}
			}

		}

		.bottom_all {
			width: 100%;
			padding: 35rpx 24rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fdfdfd;
			border-top: 2rpx solid #F8F8F8;

			.hq {
				border-radius: 100rpx;
				padding: 13rpx 53rpx;
				border-color: #FA2B47;
				color: #FA2B47;
			}
		}
	}
</style>